<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery 层次获取器</title>
    <script type="text/javascript" src="/static/js3/jQuery-2.1.4/jquery-2.1.4.min.js"></script>
    <style type="text/css"> .selected {
        background-color: gray;
    }</style>
    <script>
        $(function () {
            console.log($('ul li'));
            console.log($('#myul>li').size());
            console.log($('label~input').size());
            console.log($('label+input').size());
        })
    </script>
</head>
<body>
<ul id="myul">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
        </ul>
    </li>
</ul>

<label>LABEL1</label><input type="text" value="text1"/><input type="text" value="text2"/><br/>
<label>LABEL2</label><input type="text" value="text3"/><input type="text" value="text4"/><br/>
<label>LABEL3<input type="text" value="text5"/><input type="text" value="text6"/></label>

<hr/>
<div>
    <p>
        问题1:获取所有ul下的所有li元素,并分析结果

    </p>
    <p>
        问题2:获取id为myul下的所有子li元素,并分析结果

    </p>
    <p>
        问题3:获取所有label元素后的input元素,并分析结果

    </p>
    <p>
        问题4:获取紧跟着label元素后的input元素,并分析结果

    </p>
</div>
</body>
</html>